<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie操作</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

    异步操作Cookie: <input type="checkbox" id="isAnsy"> <br />
    跨域操作Cookie: <input type="checkbox" id="isCross">

    <h2>添加Cookie</h2>
    <form action="/cookie/set" id="setForm">
        <input type="text" name="key" placeholder="请输入Cookie的名称"> <br/>
        <input type="text" name="val" placeholder="请输入Cookie的值"> <br />
        <input type="submit">
    </form>

    <hr />

    <h2>删除Cookie</h2>
    <form action="/cookie/del" id="delForm">
        <input type="text" name="key" placeholder="请输入Cookie的名称"> <br/>
        <input type="submit">
    </form>

</body>
<script>
    $("#setForm").submit(function(){
        var isAnsy = $("#isAnsy").is(":checked");
        var isCross = $("#isCross").is(":checked");
        if(isAnsy) {
            // 异步提交表单
            var data = $(this).serialize();
            console.log("数据：" + data);
            if(!isCross) {
                // 如果不跨域，可以使用普通ajax请求
                $.get($(this).attr("action"), data, function(val){
                    console.log("成功！");
                });
            } else {
                // 如果是跨域了，必须使用ajax方式，添加withCredentials参数（允许跨域请求添加cookie）
                var url = "http://localhost:8081"+$(this).attr("action");
                $.ajax(url, {
                    data: data,
                    xhrFields: {withCredentials: true},
                    success: function() {
                        console.log("成功");
                    }
                });
            }
            return false;
        }
        return true;
    });

    $("#delForm").submit(function(){
        var isAnsy = $("#isAnsy").is(":checked");
        var isCross = $("#isCross").is(":checked");
        if(isAnsy) {
            // 异步提交表单
            var data = $(this).serialize();
            console.log("数据：" + data);
            if(!isCross) {
                $.get($(this).attr("action"), data, function (val) {
                    console.log("成功！");
                });
            } else {
                // 如果是跨域了，必须使用ajax方式，添加withCredentials参数（允许跨域请求添加cookie）
                var url = "http://localhost:8081"+$(this).attr("action");
                $.ajax(url, {
                    data: data,
                    xhrFields: {withCredentials: true},
                    success: function() {
                        console.log("成功");
                    }
                });
            }
            return false;
        }
        return true;
    });
</script>
</html>